html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
abbr,
address,
big,
em,
img,
q,
small,
strike,
strong,
sub,
sup,
tt,
var,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
fieldset,
label,
table,
caption,
tbody,
thead,
tfoot,
tr,
th,
td,
article,
aside,
canvas,
details,
figure,
figcaption,
header,
footer,
hgroup,
menu,
nav,
output,
section,
time,
mark,
audio,
video,
input,
select,
button {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "微软雅黑", Arial; /*letter-spacing: 0.01em;*/
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/*去除默认样式*/
ul,
ol,
li {
  list-style: none;
}
/*表格边框合并，边框距零*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*继承父元素的字体系列样式*/
input,
select,
textarea,
button {
  font-family: inherit;
}
/*去除点击高亮效果*/
a,
button,
input,
select,
img,
label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: medium none;
}
input::-moz-focus-inner {
  border: none;
  padding: 0;
}
select,
input {
  vertical-align: middle;
}
/*去掉苹果的默认UI来渲染按钮*/
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
select {
  appearance: none;
  -webkit-appearance: none;
}
/*placeholder文本颜色*/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #ccc;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #ccc;
}
/*html5标签*/
header,
footer,
section,
article,
aside,
nav,
figure {
  display: block;
}
/*长英文字母 数字 换行*/
p {
  word-break: break-all;
  word-wrap: break-word;
}
/*去除默认样式*/
h1,
h2,
h3,
h4,
h5,
h6,
strong,
i,
em,
address,
caption,
cite,
code,
dfn,
th,
var {
  font-weight: normal;
  font-style: normal;
}
fieldset,
img {
  border: none;
  display: block;
}
/*去除长按a链接弹框*/
html,
body {
  -webkit-touch-callout: none;
  margin: auto; /*max-width: 750px;*/
  width: 100%;
  height: 100%;
}
#app{
  width: 100%;
  height: 100%;
}

/*html5标签*/
header,
footer,
section,
article,
aside,
nav,
figure {
  display: block;
}

/* 图片最宽不超过父级 */
.imgMax {
  display: block;
  max-width: 100%;
  width: 100%;
}

/* 图片放大效果 */
.enlarge {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.enlarge:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

/*清除浮动*/
.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
  overflow: hidden;
}
/*浮动*/
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.text-ell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
}

.text-ell-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-ell-3 {
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.text-ell-4 {
  line-clamp: 4;
  -webkit-line-clamp: 4;
}

/* 文字 */
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-nowrap {
  white-space: nowrap;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.bold,
b,
strong {
  font-weight: 700;
}

.box-hide {
  display: none !important;
}

.box-show {
  display: block !important;
}

.box-flex {
  display: flex !important;
}

.dropup {
  position: relative;
}

.btn-pointer {
  cursor: pointer;
}

.btn-pointer-none {
  pointer-events: none;
}

.hide {
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

.marauto {
  margin-right: auto;
}
.malauto {
  margin-left: auto;
}

/* 屬性自定義 */
:root {
  /* 字體自定義 */
  --fz12: 12px;
  --fz13: 13px;
  --fz14: 14px;
  --fz15: 15px;
  --fz16: 16px;
  --fz18: 18px;
  --fz20: 20px;
  --fz22: 22px;
  --fz24: 24px;
  --fz26: 26px;
  --fz28: 28px;
  --fz30: 30px;
  --fz32: 32px;
  --fz34: 34px;
  --fz36: 36px;
  --fz44: 44px;
  --fz52: 52px;

  /* 顏色自定義 */
  --Cffffff: #ffffff;
  --C000000: #000000;
  --C333333: #333333;
  --C666666: #666666;
  --C999999: #999999;
  --C4c4c4c: #4c4c4c;
  --C949498: #949498;
  --Cff562f: #ff562f;
  --Cfb411e: #fb411e;
  --C1a1a1a: #1a1a1a;
  --C4167aa: #4167aa;
  --C4acf00: #4acf00;
  --C01bbd3: #01bbd3;
  --Cfafafa: #fafafa;
  --C168eff: #168eff;
  --Cb2b2b2: #b2b2b2;
  --C2367b9: #2367b9;
  --Cf6f9fc: #f6f9fc;
  --C1776ff: #1776ff;
  --Cf3f5f7: #f3f5f7;
  --Cffa228: #ffa228;
  --C358cdd: #358cdd;

  /* 寬度自定義 */
  --width: 1200px;
}

/* 间距值 */
.mtop3 {
  margin-top: 3px;
}
.mrig3 {
  margin-right: 3px;
}
.mlef3 {
  margin-left: 3px;
}
.mbot4 {
  margin-bottom: 4px;
}
.mtb10 {
  margin: 10px 0;
}
.mlr6 {
  margin: 0px 6px;
}

.ptop30 {
  padding-top: 30px;
}
.prig10 {
  padding-right: 10px;
}
.ptb20 {
  padding: 20px 0;
}
.plr20 {
  padding: 0 20px;
}

.padd20 {
  padding: 20px;
}
.br4 {
  border-radius: 4px;
}

.br12 {
  border-radius: 12px;
}

/* 字體颜色自定義 */
.Cffffff {
  color: var(--Cffffff);
}
.C000000 {
  color: var(--C000000);
}
.C333333 {
  color: var(--C333333);
}
.C666666 {
  color: var(--C666666);
}
.C999999 {
  color: var(--C999999);
}
.C4c4c4c {
  color: var(--C4c4c4c);
}
.C949498 {
  color: var(--C949498);
}
.Cff562f {
  color: var(--Cff562f);
}
.C1a1a1a {
  color: var(--C1a1a1a);
}
.C4167aa {
  color: var(--C4167aa);
}
.Cfb411e {
  color: var(--Cfb411e);
}
.C4acf00 {
  color: var(--C4acf00);
}
.C01bbd3 {
  color: var(--C01bbd3);
}
.C168eff {
  color: var(--C168eff);
}
.Cb2b2b2 {
  color: var(--Cb2b2b2);
}
.C2367b9 {
  color: var(--C2367b9);
}
.C1776ff {
  color: var(--C1776ff);
}
.Cffa228 {
  color: var(--Cffa228);
}
.C358cdd {
  color: var(--C358cdd);
}

/* 背景顏色自定義 */
.bffffff {
  background: var(--Cffffff);
}
.b333333 {
  background: var(--C333333);
}
.bfafafa {
  background: var(--Cfafafa);
}
.bf6f9fc {
  background: var(--Cf6f9fc);
}
.bf3f5f7 {
  background: var(--Cf3f5f7);
}

/* 字體大小自定義 */
.fz12 {
  font-size: var(--fz12);
}
.fz13 {
  font-size: var(--fz13);
}
.fz14 {
  font-size: var(--fz14);
}
.fz15 {
  font-size: var(--fz15);
}
.fz16 {
  font-size: var(--fz16);
}
.fz18 {
  font-size: var(--fz18);
}
.fz20 {
  font-size: var(--fz20);
}
.fz22 {
  font-size: var(--fz22);
}
.fz24 {
  font-size: var(--fz24);
}
.fz26 {
  font-size: var(--fz26);
}
.fz28 {
  font-size: var(--fz28);
}
.fz30 {
  font-size: var(--fz30);
}
.fz32 {
  font-size: var(--fz32);
}
.fz34 {
  font-size: var(--fz34);
}
.fz36 {
  font-size: var(--fz36);
}
.fz44 {
  font-size: var(--fz44);
}
.fz52 {
  font-size: var(--fz52);
}

/*a链接*/
a {
  text-decoration: none;
  color: #333333;
  cursor: pointer;
}
a:hover,
a:active,
a:focus {
  color: #fb411e;
  text-decoration: none;
}
a {
  &.btnicon {
    display: flex;
    align-items: center;
    .icon {
      margin: 0 3px;
    }
  }
}

/* 旋转效果 */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  to {
    -webkit-transform: rotate(370deg);
    transform: rotate(370deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  to {
    -webkit-transform: rotate(370deg);
    transform: rotate(370deg);
  }
}

/*响应式布局*/
@media screen and (min-width: 320px) and (max-width: 480px) {
}
@media screen and (min-width: 481px) and (max-width: 768px) {
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
}
@media screen and (min-width: 1201px) {
}
